<template>
  <div class="bussiensdetail">
    <div class="top"><div class="font20">商机中心</div></div>
    <div class="cse">
      <div class="font24">{{info.productName}} <span>{{info.returnType}} 返{{info.returnPoint}}%</span></div>
      <div class="font14">   客户名称：{{info.customName}} <span>｜</span>     客户需求描述：{{info.customDescrption}}</div>
      <!-- 推荐人姓名：{{info.userName}}     <span>｜</span>   -->
      <span class="font15">{{info.createTime | formatDate}}</span>
    </div>
    <div class="cont">
      <div class="contList">
        <div class="uls1s">
          <ul class="uls1">
            <li>
              <div class="font18">收到商机，等待审核</div>
              <div class="font15"><span>{{info.createTime | formatDate}}</span></div>
              <div class="clickCont">
                <el-button class="succ" v-if="info.passTime != null">通过</el-button>
                <el-button class="reject" v-else-if="info.businessStatus == 3">拒接</el-button>
              </div>
            </li>
              <li v-if="info.passTime != null">
                <div class="font18">审核通过</div>
                <div class="font15"><span>{{info.passTime | formatDate}}</span></div>
              </li>
            <template v-if="info.businessStatus != 3 && info.businessStatus != 2">
              <li v-if="info.awaitTime != null">
                <div class="font18">已引荐，等待供应商确认</div>  
                <div class="font15"><span>{{info.awaitTime | formatDate}}</span></div>
                <div class="font14">备注：{{info.awaitRemark}}</div>
                <div class="clickCont" v-show="info.confirmAwaitTime == null">
                  <el-button class="confirm" @click="showconfirmAwaitView">确认</el-button>
                </div>
              </li>
              <li v-show="info.confirmAwaitTime != null">
                <div class="font18">引荐成功</div>
                <div class="font14">备注：{{info.confirmAwaitRemark}}</div>
                <div class="font15"><span>2019.11.09</span><span>11:50</span></div>
              </li>
              <li v-show="info.signTime != null">
                <div class="font18">已签单，等待供应商确认</div>
                <div class="font15"><span>{{info.signTime | formatDate}}</span></div>
                 <div class="font14">备注：{{info.signRemark}}</div>
                <div class="clickCont" v-show="info.confirmSignTime == null">
                  <el-button class="confirm" @click="showConfirmSignView">确认</el-button>
                </div>
              </li>

              <li v-show="info.confirmSignTime != null">
                <div class="font18">签单成功</div>
                 <div class="font14">备注：{{info.confirmSignRemark}}</div>
                <div class="font15"><span>{{info.confirmSignTime | formatDate}}</span></div>
              </li>

              <li v-show="info.moneyTime != null">
                <div class="font18">已回款</div>
                <div class="font15"><span>{{info.moneyTime | formatDate}}</span></div>
              </li>
            </template>
          </ul>
          <template v-show="info.confirmSignTime != null">
            <div style="text-align:center"><el-button @click="showAddMoenyView" class="addState">添加回款记录</el-button></div>
          </template>
        </div>
        <div v-show="info.moneyTime != null" class="uls2Cont">
          <div class="uls2s">
            <ul class="uls2">
                <li v-for="(item,index) in backList" :key="index">
                  <div class="lt"><span>{{item.createTime | formatDate}}  <span class="font14">备注：{{item.remark}}</span></span><span>回款金额： ¥{{item.amount}}</span></div>
                  <span @click="showModifyView(item)" class="modify">修改</span>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

 <!-- 确认引荐 -->
    <el-dialog
      title="确认引荐"
      :visible.sync="showconfirmAwait"
      custom-class="cles"
      width="430px">
      <div class="introduceCont">
        <el-form ref="form"  label-width="100px">
            <el-form-item label="产品：">
              <div class="cec">{{info.productName}}</div>
            </el-form-item>
            <el-form-item label="报备时间：">
              <div class="cec">{{info.createTime | formatDate}}</div>
            </el-form-item>
            <el-form-item label="返点：">
              <div class="cec cecclo">{{info.returnType}} 返{{info.returnPoint}}%</div>
            </el-form-item>
            <!-- <el-form-item label="推荐人姓名：">
              <div class="cec">{{info.userName}}</div>
            </el-form-item> -->
            <el-form-item label="客户名称：">
              <div class="cec">{{info.companyName}}</div>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="awaitRemark" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitAwait()">确认</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 确认签单 -->
     <el-dialog
      title="确认签单"
      :visible.sync="showConfirmSign"
      width="430px"
      custom-class="cles addcles">
      <el-form ref="form"  label-width="100px">
            <el-form-item label="产品：">
              <div class="cec">{{info.productName}}</div>
            </el-form-item>
            <el-form-item label="报备时间：">
              <div class="cec">{{info.createTime | formatDate}}</div>
            </el-form-item>
            <el-form-item label="返点：">
              <div class="cec cecclo">{{info.returnType}} 返{{info.returnPoint}}%</div>
            </el-form-item>
            <!-- <el-form-item label="推荐人姓名：">
              <div class="cec">{{info.userName}}</div>
            </el-form-item> -->
            <el-form-item label="客户名称：">
              <div class="cec">{{info.companyName}}</div>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="signRemark" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitSign()">确认</el-button>
        </div>
    </el-dialog>

     <!-- 添加回款 -->
     <el-dialog
      title="添加回款"
      :visible.sync="showAddMoeny"
      width="430px"
      custom-class="cles addcles">
       <el-form ref="form"  label-width="100px">
            <el-form-item label="回款金额">
              <el-input-number v-model="addMoenyMoney"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="addMoneyRemark" placeholder="请输入内容"></el-input>
            </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="submitAddMoney">确认</el-button>
        </div>
    </el-dialog>

    <!-- 修改回款 -->
    <el-dialog
      title="修改回款"
      :visible.sync="showModify"
      width="430px"
      custom-class="cles addcles">
        <el-form ref="form"  label-width="100px">
           <el-form-item label="回款金额">
              <el-input v-model="modifyAmount"></el-input>
            </el-form-item>
             <el-form-item label="备注">
              <el-input type="textarea" v-model="modifyRemark"  placeholder="请输入内容"></el-input>
            </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="submitModifyMoney">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate } from "@/utils/filter.js"
import {GetBusinessByIdforCompany,doConfirmAwait,DoConfirmSign,addMoneyBack,getMoneyBackList,modifyMoneyBack} from "@/api/business"
export default {
  name: "home",
  data() {
    return {
      info:{},
      showconfirmAwait:false,
      showConfirmSign:false,
      awaitRemark:'',
      signRemark:'',
      showAddMoeny:false,
      addMoenyMoney:0,
      addMoneyRemark:'',
      backList:[],
      showModify:false,
      editMoneyRow:{},
      modifyAmount:0,
      modifyRemark:'',


      dialogVisible: false,
      addSta:false,
      addSta2:false,
      backMoney:false
    }
  },
  filters: {
    formatDate(time) {
      var data = new Date(time)
      return formatDate(data, "yyyy-MM-dd hh:mm:ss")
    }
  },
  methods: {
    showconfirmAwaitView(){
      this.showconfirmAwait = true
    },
    submitAwait(){
      var id = this.$route.query.id
      doConfirmAwait(id,this.awaitRemark).then(res=>{
        this.$message({
          type:'info',
          message:'操作成功！'
        })
        this.loadDetail()
        this.showconfirmAwait = false
      })
    },

    showConfirmSignView(){
      this.showConfirmSign = true
    },
    submitSign(){
      var id = this.$route.query.id
      DoConfirmSign(id,this.signRemark).then(res=>{
        this.$message({
          type:'info',
          message:'操作成功！'
        })
        this.loadDetail()
        this.showConfirmSign = false
      })
    },

    showAddMoenyView(){
      this.addMoneyRemark = ''
      this.addMoenyMoney = 0
      this.showAddMoeny = true
    },
    submitAddMoney(){
      if(this.addMoenyMoney == null || this.addMoenyMoney <= 0){
        this.$message.error('请输入正确的金额！');
        return false;
      }
      var id = this.$route.query.id
      var amount = this.addMoenyMoney;
      var remark = this.addMoneyRemark
      addMoneyBack(id,amount,remark).then(res=>{
        this.$message({
          type:"info",
          message:'添加回款记录成功！'
        })
        this.loadDetail()
        this.showAddMoeny = false
      })
    },
    loadMoneyBack(id){
      getMoneyBackList(id).then(res=>{
        if(res != null && res.list != null){
          this.backList = res.list
        }
        console.log(res.list)
      })
    },
    showModifyView(row){
      this.showModify = true
      this.modifyRemark = row.remark
      this.modifyAmount = row.amount
      this.editMoneyRow = row
    },
    submitModifyMoney(){
      if(this.modifyAmount == null || this.modifyAmount <= 0){
        this.$message.error('请输入正确的金额！');
        return false;
      }
      var bid = this.$route.query.id
      var id = this.editMoneyRow.id
      var modifyAmount = this.modifyAmount;
      var modifyRemark = this.modifyRemark
      modifyMoneyBack(id,bid,modifyAmount,modifyRemark).then(res=>{
        this.$message({
          type:"info",
          message:'修改回款记录成功！'
        })
        this.loadDetail()
        this.showModify = false
      })
    },
    loadDetail(){
      var id = this.$route.query.id
      GetBusinessByIdforCompany(id).then(res=>{
        this.info = res.info
      })
      this.loadMoneyBack(id)
    }
  },
  created() {
    this.loadDetail()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.addcles.cles{
  .el-form-item{
    margin-bottom: 10px;
  }
  .el-dialog__footer{
    padding: 0 0 40px 0;
  }
  .el-dialog__body{
    padding-bottom: 0;
    .el-select{
      width: 100%;
    }
  }
}
.addState{
  background-color: #f65c51;
    border-radius: 20px;
    line-height: 1;
    border: none;
    font-size: 14px;
    color: #fff;
    padding: 13px 60px;
    margin-bottom: 2rem
}
.bussiensdetail{
  .top{
    .font20{
      color: #333333;
      font-size: 20px;
      padding-left: 15px;
      position: relative;
      line-height: 33px;
      &::after{
        content: '';
        width: 4px;
        height: 15px;
        background-color: #2f59ab;
        border-radius: 2px;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
  }
  .cse{
    margin-bottom: 20px;
    margin-top: 20px;
    background-color: #ffffff;
	  box-shadow: 0px 0px 8px 0px 
		rgba(43, 61, 86, 0.14);
    border-radius: 5px;
    padding: 30px 35px;
    position: relative;
    .font24{
      color: #333333;
      font-size: 24px;
      margin-bottom: 20px;
      span{
        display: inline-block;
        color: #fff;
        font-size: 14px;
        background-color: #4985e9;
        border-radius: 3px;
        padding: 7px 15px;
        line-height: 1;
        margin-left: 15px;
        position: relative;
        top: -3px;
      }
    }
    .font14{
      color: #a09f9f;
      font-size: 14px;
      span{
        margin: 0 25px;
      }
    }
    .font15{
      position: absolute;
      right: 35px;
      top: 50%;
      transform: translateY(-50%);
      color: #a09f9f;
    }
  }
  .cont{
    background-color: #ffffff;
	  box-shadow: 0px 0px 8px 0px 
		rgba(43, 61, 86, 0.14);
    border-radius: 5px;
    padding: 40px;
    .uls1{
      padding-left: 50px;
      position: relative;
      li{
        position: relative;
        list-style: none;
        padding: 18px 0;
        border-bottom: solid 1px #d2d2d2;
        &::after{
          content: '';
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #4985e9;
          position: absolute;
          left: -34px;
          top: 18px;
          border: 4px solid #fff;
        }
        &::before{
          content: '';
          width: 1px;
          height: 100%;
          border-radius: 50%;
          background-color: #4985e9;
          position: absolute;
          left: -25px;
          top: 38px;
        }
         &:last-child{
           border: none;
         }
        &:last-child::before{
          display: none;
        }
        .font18{
          color: #333333;
          font-size: 18px;
        }
        .font15{
          color: #a09f9f;
          font-size: 15px;
          margin: 5px 0;
          span{
            margin-right: 12px;
          }
        }
        .font14{
          color: #a09f9f;
          font-size: 14px;
        }
        .clickCont{
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          button{
            padding: 7px 20px;
            border: none;
            line-height: 1;
            color: #fff;
            font-size: 14px;
            border-radius: 14px;
            &.succ{
              background-color: #6ac044;
            }
            &.reject{
              background-color: #fc6e5a;
            }
            &.confirm{
              background-color: #6ac044;
            }
          }
        }
      }
    }
    .uls2Cont{
      padding-left: 50px;
    }
    .uls2s{
       padding: 30px 50px;
      border-radius: 3px;
      border: solid 1px #bfbfbf;
       button{
          color: #ffffff;
          width: 97px;
          height: 30px;
          background-color: #f65c51;
          border-radius: 15px;
          line-height: 1;
          border: none;
          font-size: 14px;
          padding: 0;
        }
      .uls2{
        padding-left: 0;
      li{
        margin-bottom: 13px;
        color: #a09f9f;
        width: 100%;
        display: inline-block;
        list-style-type: disc;
        position: relative;
         padding-left: 10px;
        &::after{
          content: '';
          width: 4px;
          height:4px;
          border-radius: 2px;
          background: #a09f9f;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        .lt{
          width: calc(100% - 60px);
          color: #a09f9f;
          font-size: 15px;
          float: left;
          span:last-child{
            margin-left: 30px;
          }
        }
        .modify{
          float: right;
          color: #a09f9f;
          font-size: 15px;
          border-bottom: 1px solid #a09f9f;
          cursor: pointer;
          &:hover{
            color: #4985e9;
            border-color: #4985e9;
          }
        }
      }
      
    }
    }
  }
}
.cles{
  background-color: #ffffff;
	box-shadow: 0px 0px 13px 0px 
		rgba(83, 93, 115, 0.45);
	border-radius: 3px;
  .el-dialog__header{
    text-align: center;
  }
  .el-dialog__body{
    padding: 10px 40px 10%;
  }
  .el-form-item{
    margin-bottom: 0;
    .cec{
      color: #333;
    }
    .cecclo{
      color: #4985e9;
    }
  }
  .dialog-footer{
    text-align: center;
    margin-top: 2rem;
    button{
      width: 97px;
      height: 30px;
      background-color: #467be7;
      border-radius: 15px;
      color: #fff;
      line-height: 1;
      padding: 0;
      border: none;
    }
  }
}
</style>
